/*苹果设备表单修正*/
input:focus { outline: none; }
input, button, select, textarea { outline: none; resize: none; webkit-box-shadow: 0 0 0px; -webkit-appearance: none; background: none;border: none }
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; }
* {-webkit-tap-highlight-color: transparent;outline: 0;  }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ,header, section, footer {  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline;  outline: none;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  }
html { height:100%;background:#f0f2f4;touch-action: manipulation;}
body { font-size: 62.5%;  line-height: 1;  margin: 0 auto;/*   min-width: 320px;  max-width: 768px; */  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", Arial, Helvetica, STHeiti, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";  -webkit-text-size-adjust: 100% !important;  -webkit-user-select: none;  user-select: none;  color: #000; -webkit-user-select: none; -webkit-text-size-adjust: none; font:normal 16px/200% "微软雅黑", helvetica, arial; text-align:left; }
/* css 重置 */
img { border:0; margin: 0; padding: 0;   }
a{text-decoration:none;color:#000;}
a,a:hover,a:active,a:visited,a:link,a:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline:none;
background: none;
text-decoration: none;
}
ul,ol,li{list-style: none;}
body{ /*background:#f4f4f4; */color:#353535;font-size: 14px }
.ellipsis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.mg-top-10{margin-top: 10px}
.mg-top-5{margin-top: 5px}
/* 头部 */
header{  background:#FFF; height: 50px;line-height: 50px;text-align: center;position: relative;font-size: 17px }
header .nav-btn{width: 9px;height: 15px;position: absolute;left: 15px;top: 0;bottom: 0;margin: auto 0;cursor: pointer;background: url(../img/mbg01.png) no-repeat -874px -89px;}
header .logo{ padding:10px 0 5px 10px;  color:#fff;  font-style:italic; font-weight:bold; text-shadow:1px 1px 1px #965e18; font-size:12px; }
header .logo a{ font-size:30px; line-height:30px; color:#fff;  }

/* 尾部 */
footer{ text-align:center; padding:10px 0; line-height:18px; font-size:14px; }

/* 内容 */
/*  -------------------------------------- */
  .view ul{ padding:10px 0 10px 10px;  }
  .view li{ height:33px; line-height:33px;   }
  .view a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }  /* 去掉链接触摸高亮 */
  .view li a{ color:#555;  }
  .view .t{ height:85px; overflow:hidden;   }
  .view .t .pic{ width:130px; float:left;    }
  .view .t .con{ margin-left:130px; line-height:20px;   }
  .view .t .con p{ font-size:12px; color:#999;  }



  .footer { height:50px; padding:5px; font-size:12px; background:#F3F3F3; border-top:1px solid #eee; position: fixed;bottom:0;width: 100% ;box-sizing: border-box;display: flex;justify-content: space-around}
  .footer a{display: flex;flex-direction:column;justify-content: center;align-items: center;color: #666}

  .footer a.index span:nth-of-type(1){background-image: url(../img/index-icon.png);background-size: contain;width: 2rem;height: 2rem;background-repeat: no-repeat;background-position: center}
  .footer a span{line-height: 20px}
  .footer a.index.on span:nth-of-type(1){background-image: url(../img/index-on-icon.png);}
  .footer a.index.on span:nth-of-type(2){color: rgb(51, 51, 51);}

  .footer a.appoint span:nth-of-type(1){background-image: url(../img/appointment-icon.png);background-size: contain;width: 2rem;height: 2rem;background-repeat: no-repeat;background-position: center}
  .footer a span{line-height: 20px}
  .footer a.appoint.on span:nth-of-type(1){background-image: url(../img/appointment-on-icon.png);}
  .footer a.appoint.on span:nth-of-type(2){color: rgb(51, 51, 51);}

  .footer a.my span:nth-of-type(1){background-image: url(../img/staff-icon.png);background-size: contain;width: 2rem;height: 2rem;background-repeat: no-repeat;background-position: center}
  .footer a span{line-height: 20px}
  .footer a.my.on span:nth-of-type(1){background-image: url(../img/staff-on-icon.png);}
  .footer a.my.on span:nth-of-type(2){color: rgb(51, 51, 51);}


/*.bd{background:  #f4f4f4;padding-top: 20px}*/

.view .indexpage{display:block }
.view .appointpage{display: none}
.view .mypage{display:none }

/*首页*/
.indexpage .img-box{position: relative}
.indexpage .mainimg {background-image: url(../img/dramamain.png);background-repeat: no-repeat;background-size: cover;display: inline-block;width: 100%;height: 700px;margin: 0 auto;}
.indexpage .mainimg .text{text-align: center;width: 100%;}


.indexpage .minimg{width: 100%;height: 230px;background: url(../img/drama6.png);background-repeat: no-repeat;background-size: cover;display: inline-block;}
.indexpage .minimg.second{background-image: url(../img/drama5.png);}
.indexpage .img-box .text{position: absolute;color: #fff;bottom: 81px;}
.indexpage .img-box .text h2{font-weight: 700;font-size: 18px;line-height: 50px}
.indexpage .img-box .text p{font-size: 14px;line-height: 18px}

.indexpage .img-box .text.left{bottom: 50px}
.indexpage .img-box .text.left{left:30px;}
.indexpage .img-box .text.right{right:30px;}



 .float-telephone{width: 36px;height: 36px;line-height: 36px;display: block;border-radius: 50%;text-align: center;cursor: pointer;opacity: .9;font-size: 17px;background: #fff;position: fixed;bottom: 110px;right: 20px;box-shadow: 0 0 15px 0 rgba(0,0,0,.2);}
.float-telephone span{font-size: 20px;color: #8c8c8c;display: inline-block;}


/*首页更改 显示书籍列表*/
.book-list-box a{width: 48%;box-sizing: border-box;background: #fff;box-shadow: 0 0 5px rgba(0,0,0,0.2);overflow: hidden;display: inline-block;padding: 5px 8px;margin-top: 10px}
.left{float: left}
.right{float: right}
.book-list-box a .book-pic{padding: 10px;}
.book-list-box a .book-pic img{height: 50px; }
.book-pic{background-image: url("../img/drama1.jpg");background-repeat: no-repeat;width: 100%;height: 175px;background-size: contain;}
.second{background-image: url("../img/drama8.png")}
.third{background-image: url("../img/drama9.jpg")}
.info{line-height: 14px;}
.info .name{
  font-size: 14px;
  word-wrap: break-word;
  overflow: hidden;
  color: #353535;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  max-height: 28px;
}
.orange{color: #FAA207}
.info p{margin-bottom: 8px;color: #888;}
.info .appint {display: flex;justify-content: space-between;align-items: center;/*line-height: 24;height: 24px*/}
.info  span{display: inline-block}
.info  .name{margin-bottom: 10px}
.info .pernum {font-size: 12px;margin-right: 8px;}
.info .pernum span{margin-right: 10px}
.info .pernum span.iconfont{font-size: 14px}
.info .time span{font-size: 12px}
.info .appint .prize{font-size: 16px;color: rgb(253, 97, 95);}
.info .appint .btn{padding: 3px 7px;border-radius: 10px;text-align: center;
  border: 1px solid  rgb(253, 97, 95);
  color:  rgb(253, 97, 95);
  background-color: #fff;
}
.clearfix:after{
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  /* 触发 hasLayout */
  zoom: 1;
}
 .store-info{background-image: url(../img/99999.png);
   background-repeat: no-repeat;
   background-size: cover;
   height: 160px;
   position: fixed;
   top: 0;
   width: 100%;z-index: 3}

.store-info h1{color: #fff;font-size: 25px;letter-spacing: 3px;text-align: center;padding: 50px 0 10px;}
.store-info p{color: #fff;text-align: center;line-height: 14px;font-size: 14px;margin-top: 5px}
.store-info p i{display: inline-block;margin-right: 4px}
/*遮罩*/
.view .fullscreen{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.5);z-index: 2;bottom: 0; display: none }
.view .modal{background: #dadadaff;position: fixed;bottom: 0;width: 100%;z-index: 3;text-align: center;display: none}
.view .modal p{height: 50px;line-height: 50px;text-align: center;background-color: #f9f9f9;cursor: pointer;color: #353535}


/*话剧简介*/
.drama-detail .drama-detail-box{padding: 20px;box-sizing: border-box;margin-top: 10px;background: #fff}
.drama-detail .drama-detail-box .drama-title {font-size: 20px;color: rgb(53, 53, 53);font-weight: bold;line-height: 35px;}
.drama-detail .drama-detail-box .drama-title::after{content: "";background-image: url("../img/title-bg.jpg");background-size: contain;left: 0;top: 0;background-repeat: no-repeat;display: inline-block}
.drama-detail .drama-detail-box .drama-content{margin-top: 10px;font-size: 12px}



  /*预约*/
.appointpage{background: #fff;padding:0 1rem;padding-bottom:3rem;box-sizing: border-box;margin-top: 8px;}
.appointpage .appoint-wrap{display: inline-block;border-bottom: 1px solid #eee;width: 100%;margin-top: 17px;padding-bottom: 10px;position:relative}
.appointpage .appoint-wrap .promotion-icon{position: absolute;position: absolute;width: 24px;height: 27px;top: -5px;left: 5px;background: url("../img/mbg01.png") no-repeat -1268px -396px;}
.appointpage .appoint-wrap .appoint-img-wrap{overflow: hidden}
.appointpage .appoint-wrap .appoint-img-wrap img{height: 12rem;vertical-align: middle;margin: 0 auto;width: 100%}
.appointpage .appoint-wrap .appoint-name-wrap .name-title{margin-top: 10px;font-size: 15px;word-wrap: break-word;line-height: 1.4em;max-height: 2.8em;overflow: hidden;color: #353535;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;}
.appointpage .appoint-wrap .appoint-name-wrap .name-summary{font-size: 12px;margin-top: 4px;color: #888;line-height: 1rem}
.appointpage .appoint-wrap .appoint-extra-wrap{display: flex;justify-content: space-between;margin-top: 8px;align-items: center}
.appointpage .appoint-wrap .appoint-extra-wrap .extra-info{display: flex;align-items: center}
.appointpage .appoint-wrap .appoint-extra-wrap div > span{margin-right: 4px;color:#989898;font-size: 12px }
.appointpage .appoint-wrap .appoint-extra-wrap .selling-price{color: rgb(51, 51, 51);font-size:16px}
.appointpage .appoint-wrap .appoint-extra-wrap .original-price{font-size: 12px;color: #999;text-decoration: line-through;vertical-align: middle;}
.appointpage .appoint-wrap .appoint-extra-wrap .extra-btn{width: 80px;height: 25px;line-height: 25px;text-align: center;border: none;outline: 0;background-color: rgb(51, 51, 51);;color: #fff;border-radius: 12px;font-size: 12px;cursor: pointer;}

/*预约详情*/
.appoint-detail .appointpage{margin-top: 0;position: relative}
.appoint-detail .appointpage{padding-bottom: 0;}
.appoint-detail .appointpage .appoint-wrap {border-bottom: none}
.appoint-detail .appoint-name-wrap .name-title{display: flex!important;justify-content: space-between}
.appoint-detail .appoint-name-wrap .name-title p{font-size: 15px;word-wrap: break-word;line-height: 1.4em;max-height: 2.8em;overflow: hidden;color: #353535;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;}
.appoint-detail .appoint-name-wrap .name-title span{width: 28px;
  height: 23px;
  float: left;
  background: url(../img/mbg01.png) -730px -190px no-repeat;
  cursor: pointer;}
.appoint-detail .appoint-name-wrap .name-title i{font-size: 12px;color:#989898; }
.appoint-detail .appoint-name-wrap .name-.appoint-detail .appoint-detail-info h1title i{font-size: 12px;color: #ccc}
.appoint-detail .appoint-extra-wrap{justify-content: flex-start!important;}
.appoint-detail .appoint-extra-wrap  div > span{color:#989898;font-size: 12px;margin-left: 4px;display: inline-block}
.appoint-detail .appoint-detail-info .detail-info-title::before {content: '';border-left: 4px solid #353535;height: 20px;margin-top: -2px;margin-right: 10px;display: inline-block;vertical-align: middle;border-radius: 4px;}
.appoint-detail .appoint-detail-info{background: #fff;margin-top: 9px;}
.appoint-detail .appoint-detail-info h1{    height: 45px;line-height: 45px;padding-left: 15px;border-bottom: 1px solid #eee;}
.appoint-detail .appoint-detail-info p{padding: 14px;color: #878787;text-align: left;font-size: 14px;line-height: 20px;}


.appoint-detail .footer{height:50px; padding:10px; font-size:12px; background:#fff; border-top:1px solid #eee;box-shadow: 0 -2px 8px 0 rgba(0,0,0,.05); position: fixed;bottom:0px;width: 100% ;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center}
.appoint-detail .footer span{font-size: 14px;color: #666;display: inline-block;margin-left: 10px}
.appoint-detail .footer span::before{margin-bottom: 3px;display: block;text-align: center;font-size: 20px;color: #666;}
.appoint-detail .footer .extra-btn{width: 80%;height: 40px;line-height: 40px;text-align: center;border: none;outline: 0;background-color: rgb(51, 51, 51);color: #fff;border-radius: 20px;font-size: 14px;cursor: pointer;}

/*遮罩*/
.appoint-detail .fullscreen{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.5);z-index: 2;bottom: 0;display: none;  }
.appoint-detail .modal{background: #dadadaff;position: fixed;bottom: 0;width: 100%;z-index: 3;text-align: center;display: none;}
.appoint-detail .modal p{height: 50px;line-height: 50px;text-align: center;background-color: #f9f9f9;cursor: pointer;color: #353535}


/*预约订单*/
.appoint-order .appoint-order-detail{padding: 15px;background: #fff;overflow: hidden;display: flex;box-sizing: border-box}
.appoint-order .appoint-order-detail img{width: 80px;margin-right: 15px;}
.appoint-order .appoint-order-detail .order-detail-box{overflow: hidden;}
.appoint-order .appoint-order-detail .order-detail-box .order-name{font-size: 15px;word-wrap: break-word;line-height: 1.4em;max-height: 2.8em;overflow: hidden;color: #353535;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;}
.appoint-order .appoint-order-detail .order-detail-box .order-summary{    font-size: 12px;margin-top: 4px;color: #888;line-height: 1rem;}
.appoint-order .appoint-order-detail .order-detail-box .order-price-wrap{display: flex;padding: 0 5px;font-size:14px;justify-content: space-between;margin-top: 12px;}
.appoint-order .appoint-order-detail .order-detail-box .order-price-wrap .pay::before{content: '';width: 16px;height: 15px;display: inline-block;margin-right: 5px;vertical-align: -2px;background: url(../img/mbg01.png) no-repeat -1146px -220px;}
.appoint-order .appoint-order-detail .order-detail-box .order-price-wrap .gopay::before{background-position: -1114px -219px}
.appoint-order .appoint-num{height: 50px;background-color: #fff;padding: 0 15px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;justify-content: space-between;margin-top: 10px}
.appoint-order .appoint-num .btn-numbox {overflow: hidden;}
.appoint-order .appoint-num .btn-numbox li {float: left;}
.appoint-order .appoint-num .btn-numbox li .number,
.appoint-order .appoint-num .kucun {display: inline-block;font-size: 12px;color: #808080;vertical-align: sub;}
.appoint-order .appoint-num .btn-numbox .count {overflow: hidden;}
.appoint-order .appoint-num .btn-numbox .count .num-jian,
.appoint-order .appoint-num .input-num, .num-jia {display: inline-block;width: 28px;height: 28px;line-height: 28px;text-align: center;font-size: 14px;color: #999;cursor: pointer;border: 1px solid #e6e6e6;}
.appoint-order .appoint-num .btn-numbox .count .input-num {width: 58px;height: 26px;color: #333;border-left: 0;border-right: 0;}
.appoint-order .appoint-num .btn-numbox .count span{vertical-align: middle;height: 30px!important;}

.appoint-order .appoint-contact-info{background: #f0f2f4;margin-top: 10px}
.appoint-order .appoint-contact-info .contact-item{background: #fff;padding: 15px 15px 10px;border-bottom: 1px solid #eee;}
.appoint-order .appoint-contact-info .contact-item .contact-name{margin-bottom: 5px}
.appoint-order .appoint-contact-info .contact-item .item-must{color: red;vertical-align: middle;margin-right: 5px;display: inline-block;}
.appoint-order .appoint-contact-info .contact-item .jz-input{height: 34px;box-sizing: border-box;border-radius: 2px;background-color: #fff;font-size: 13px;font-family: 微软雅黑;color: #333;padding: 0 8px;text-overflow: ellipsis;}
.appoint-order .appoint-contact-info .contact-item .input-textarea-inner{width:100%;height: 60px;margin-top: 10px}

.appoint-order .footer{height:50px; padding:10px; font-size:12px; background:#fff; border-top:1px solid #eee;box-shadow: 0 -2px 8px 0 rgba(0,0,0,.05); position: fixed;bottom:0px;width: 100% ;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center}
.appoint-order .footer .nav-item{font-size: 14px;color: #666;display: flex;justify-content: center}
.appoint-order .footer .extra-btn{width: 80%;height: 40px;line-height: 40px;text-align: center;border: none;outline: 0;background-color: rgb(51, 51, 51);color: #fff;border-radius: 20px;font-size: 14px;cursor: pointer;}

/* 预约订单  提示是否提交订单*/
.appoint-order .tk-box,.pay-tip-box{ display:  none; }
.appoint-order .modal{width: 20rem; /*nav-item height: 12rem; */ border-radius: 10px; box-shadow: 0 0 0.1rem #aaaaaa; position: absolute; top: 50%; right: 50%; margin-top: -10rem; margin-right: -10rem; background: white; background-size: 42%; z-index: 2;}
.appoint-order .modal .tk-title{text-align: center; padding-top: 1rem; margin-bottom: 0.1rem; font-size: 1rem; color: #111111; letter-spacing: 0.1rem;}
.appoint-order .modal .tk-content{text-align: left; font-size: 0.8rem; padding: 1rem 2rem; color: #888; font-size: 1rem;}
.appoint-order .modal .tk-content span{font-weight: bold;margin: 0 1rem}
.appoint-order .tk-footer-cn{width: 100%;margin: 0 auto ;display: flex;}
.appoint-order .tk-footer{position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: #666; text-decoration: none; text-align: center; color: #666; border-top: 1px solid #D5D5D6; padding:0.5rem; font-size: 1rem;}
.appoint-order .tk-footer:nth-child(2)::before{    content: ""; position: absolute; left: 0; top: 0; border: 1px solid #D5D5D6; /* width: 1px; */ height: 99%; display: inline-block;transform: scale(0.8);-webkit-transform: scale(0.5);} /* 遮罩层 */
.appoint-order .fullScreen{position: fixed; width: 100%;height: 100%;left: 0;top: 0;opacity: 0.7; background-color: #403e3e;z-index: 1;display: block;}


/*订单提交成功页面*/
.order-sub-success {background-color:#F0F2F4 }
.order-sub-success .complete{margin-top: 50px;width: 260px;margin: 50px auto;overflow: hidden;}
.order-sub-success .complete::before {content: '';width: 100%;height: 164px;display: block;background: url(../img/mbg01.png) no-repeat -341px -268px;}
.order-sub-success .view-order-btn{ width: 115px;height: 40px;line-height: 40px;background-color: #72b54e;border-radius: 5px;color: #fff;float: left;text-align: center;cursor: pointer;}
.order-sub-success .share-btn{width: 113px;height: 38px;line-height: 40px;border: 1px solid #72b54e;border-radius: 5px;background-color: #fff;color: #72b54e;text-align: center;float: right;cursor: pointer;}



/*我的*/
.mypage .user-detail .user-header{background-color: rgb(51, 51, 51);height: 160px;position: relative;border-bottom-left-radius: 45%;border-bottom-right-radius: 45%;overflow: hidden;text-align: center;cursor: pointer;}

.mypage .user-detail .user-header .usericon-wrap{width: 60px;height: 60px;border-radius: 50%;border: 2px solid rgba(255,255,255,.5);margin: 20px auto 10px;overflow: hidden;}
.mypage .user-detail .user-header .usericon-wrap span{width: 100%;height: 100%;display: inline-block;background: url(../img/head.png) no-repeat;background-size: contain;}
.mypage .user-detail .user-header .username{color:#fff}
.mypage .container{position: relative;margin-top: -35px;}
.mypage .container .info-wrap{width: 320px;margin: 0 auto;border-radius: 4px;}
.mypage .container .info-wrap .info-detail-item{padding: 0 15px;margin-bottom: 10px;background-color: #fff;border-radius: 4px;-webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.03);box-shadow: 0 0 8px 0 rgba(0,0,0,.03);overflow: hidden;}
.mypage .container .info-wrap .info-detail-item .detail-title{display: block;height: 44px;line-height: 44px;border-bottom: 1px solid #eee;position: relative;cursor: pointer;color: #353535;}
.mypage .container .info-wrap .info-detail-item .detail-title:last-child{border:none}
.mypage .container .info-wrap .info-detail-item .detail-title::after{content: '';width: 7px;height: 12px;position: absolute;right: 0;top: 0;bottom: 0;margin: auto 0;background: url(../img/mbg01.png) no-repeat -588px -192px;}

.mypage .container .info-wrap .info-detail-item.user-info{padding-top: 5px;padding-bottom: 5px;}
.mypage .container .info-wrap .info-detail-item .info-item{padding: 6px 0;display: flex;align-items: center}
.mypage .container .info-wrap .info-detail-item .info-item span{margin-left: 8px}
.mypage .container .info-wrap .info-detail-item .item-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: url(../img/mbg01.png) no-repeat;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: inline-block;
}
 .info-detail-item .item-icon.address-icon {
  background-position: -475px -192px!important;
}

.info-detail-item  .item-icon.phone-icon{
  background-position: -502px -191px!important;
}
.info-detail-item  .item-icon.company-time-icon{
  background-position: -530px -192px!important;
}
.info-detail-item  .item-icon.introduction-icon{
  background-position: -557px -193px!important;
}

.mypage .order-status-list { height:70px;padding:5px; font-size:12px; /* border-top:1px solid #eee;*/bottom:0;width: 100% ;box-sizing: border-box;display: flex;justify-content: space-around;align-items: center}
.mypage .container .order-status-list {display: flex;justify-content: space-around;align-items: center;}
.mypage .container .order-status-list a{display: flex;flex-direction:column;justify-content: center;align-items: center;position:relative}
.mypage .container .order-status-list a span{line-height: 10px}
.mypage .container .info-detail-item .tip-bubble{width: 20px;height: 20px;line-height: 18px;position: absolute;top: -9px;right: -3px;border-radius: 50%;text-align: center;border:1px solid rgb(51, 51, 51);color: rgb(51, 51, 51);background-color: #fff}
.mypage .container .info-detail-item .tip-bubble.position-center{top: 50%;margin-top: -9px;right: 18px;font-size: 12px;background-color: rgb(253, 97, 95);
  color: white;border: none}
.mypage .order-status-list  .status-icon{width: 25px;height: 25px;display: block;margin: 0 auto 4px;background: url(../img/mbg01.png) no-repeat;}

.mypage .order-status-list  .status-icon.wait-pay{background-position: -707px -226px;}
.mypage .order-status-list  .status-icon.order-underway{background-position: -747px -153px;}
.mypage .order-status-list  .status-icon.order-complete{background-position: -707px -269px;}
.mypage .order-status-list  .status-icon.order-cancel{background-position: -707px -312px;}


/*所有状态订单*/
.all-status-orders .tabBox  .hd{  font-size:20px; background:#FFF;  }
.all-status-orders  .tabBox .hd ul{ overflow:hidden; display: flex;justify-content: space-around }
.all-status-orders  .tabBox .hd ul li{  margin:0 10px; color:#515151;font-size: 14px;height:45px; line-height:45px; }
.all-status-orders  .tabBox .hd ul .on{ border-bottom:2px solid rgb(51, 51, 51);   color: rgb(51, 51, 51);}
.all-status-orders  .tabBox .hd ul .on a{ display:block; /* 修复Android 4.0.x 默认浏览器当前样色无效果bug */  }
.all-status-orders  .tabBox .bd {}
.all-status-orders  .tabBox .bd ul{}
.all-status-orders  .tabBox .bd li{ background: #fff;margin-top: 9px;padding: 0 15px;cursor: pointer;}
.all-status-orders  .tabBox .bd a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }  /* 去掉链接触摸高亮 */
.all-status-orders  .tabBox .bd li a{ color:#555;  }
.all-status-orders  .tabBox .bd .t{ }
.all-status-orders  .tabBox .bd .t .con p{ font-size:12px; color:#999;  }

.all-status-orders .appoint-order-head{height: 49px;line-height: 49px;border-bottom: 1px solid #eee;display: flex;justify-content: space-between}
.all-status-orders .appoint-order-detail{background: #fff;overflow: hidden;display: flex;box-sizing: border-box; padding: 15px 15px 15px 0;}
.all-status-orders .appoint-order-detail img{width: 65px;height:65px;margin-right: 15px;}
.all-status-orders .appoint-order-detail .order-detail-box{overflow: hidden;}
.all-status-orders .appoint-order-detail .order-detail-box .order-name{font-size: 14px;word-wrap: break-word;line-height: 1.4em;max-height: 2.8em;overflow: hidden;color: #353535;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;}
.all-status-orders .appoint-order-detail .order-detail-box .order-summary{font-size: 12px;margin-top: 5px;color: #888;line-height: 1rem;}
.all-status-orders .appoint-order-detail .order-detail-box .order-price-wrap{display: flex;font-size:14px;margin-top: 5px;}
.all-status-orders .appoint-order-detail .order-detail-box .selling-price{font-size: 16px;color: rgb(51, 51, 51);}
.all-status-orders .appoint-order-detail .order-detail-box .original-price{font-size: 12px;color: #999;text-decoration: line-through;line-height: 24px;margin-left: 4px}

.all-status-orders .order-item-footer{height: 59px;border-top: 1px solid #eee;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
.all-status-orders .order-item-footer .order-btn {padding: 5px;background-color: #fff;border: 1px solid #999;border-radius: 2px;outline: 0;cursor: pointer;}
.all-status-orders .order-item-footer .cancel-btn{color:#999}
.all-status-orders .order-item-footer .complete-btn{color: rgb(51, 51, 51);border-color: rgb(51, 51, 51);margin-left: 8px}

/*订单详情*/
.order-detail .order-content {width: 345px;min-height: 534px;background: #fff;-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,.05);box-shadow: 0 0 5px 0 rgba(0,0,0,.05);border-radius: 4px;margin: 15px auto;}
.order-detail .order-content .order-detail-header{height: 74px;line-height: 74px;border-bottom: 1px dashed #e5e5e5;margin: 0 12px;display: -webkit-box;display: -ms-flexbox;display: flex;font-size: 15px}
.order-detail .order-content .order-details-statusImg2{width: 25px;height: 27px;margin: 24px 10px 0 10px;background: url(../img/mbg01.png) -774px -369px no-repeat;}
.order-detail .order-content .order-detail-info{display: flex;align-items: center;height: 120px;border-bottom: 1px dashed #e5e5e5;margin: 0 12px;overflow: hidden;}
.order-detail .order-content .order-detail-info  .img-wrap{width: 83px;height:83px;overflow: hidden}
.order-detail .order-content .order-detail-info .order-detail-box .order-name{font-size: 14px;font-weight: 700;color: #353535;line-height: 14px;margin-top: 8px}
.order-detail .order-content .order-detail-info .order-detail-box  .order-summary{font-size: 12px;
color: #888;line-height: 15px}
.order-detail .order-content .order-detail-info .order-detail-box .original-price{font-size: 12px;
  color: #888;
  text-decoration: line-through;}
.order-detail .order-content .order-detail-info .order-price-wrap{margin-top: 12px}
.order-detail .order-content .order-detail-info img{height: 82px;width: 82px;margin-right: 8px;background: url(../img/defaultIcon.png) 0 -1015px no-repeat;}
.order-detail .order-content .order-detail-booking
{height: 164px;border-bottom: 1px dashed #e5e5e5;margin: 0 12px;padding: 0 10px;overflow: hidden;}
.order-detail .order-content .order-detail-booking p,
.order-detail .order-content .order-detail-order p
{font-size: 14px;font-weight: 700;color: #353535;margin: 18px 0 7px 0;}
.order-detail .order-content .order-detail-booking > div,
.order-detail .order-content .order-detail-order > div{margin-bottom: 8px;font-size: 12px;color: #888;display: flex}
.order-detail .order-content .order-detail-booking span,
.order-detail .order-content .order-detail-order span {line-height: 14px}
.order-detail .order-content .order-detail-order {min-height: 124px;margin: 0 12px;padding: 0 10px;overflow: hidden;}
.order-detail .order-content .order-details-footer{height: 50px;line-height: 50px;display: -webkit-box;display: -ms-flexbox;display: flex;border-top: 1px solid #eee;}
.order-detail .order-content .order-details-btn{color: #333;text-align: center;cursor: pointer;font-size: 14px;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}
.order-detail .order-content .order-details-btn-left{border-right:1px solid #eee ;}


/*用户信息*/
.user-info .container{position: relative;}
.user-info .container .info-wrap{width: 100%;margin: 0 auto;/*border-radius: 4px;*/}
.user-info .container .info-wrap .info-detail-item{padding: 0 15px;margin-bottom: 10px;background-color: #fff;border-radius: 4px;-webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.03);box-shadow: 0 0 8px 0 rgba(0,0,0,.03);overflow: hidden;}
.user-info .container .info-wrap .info-detail-item .detail-title{    height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #eee;
  position: relative;
  cursor: pointer;
  color: #353535;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 15px;}
.user-info .container .info-wrap .info-detail-item .detail-title .img-info{background: url('../img/head.png');background-repeat: no-repeat;background-size: contain;border-radius: 50%;width: 40px;height: 40px;}
.user-info .container .info-wrap .info-detail-item .detail-title:last-child{border:none}
.user-info .container .info-wrap .info-detail-item .detail-title::after{content: '';width: 7px;height: 12px;position: absolute;right: 0;top: 0;bottom: 0;margin: auto 0;background: url(../img/mbg01.png) no-repeat -588px -192px;}
.lineheight-60{line-height: 60px!important;height: 60px!important;}

/*剧本杀库*/
.drama-list-bg{background: url(../img/dramas-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-top: 160px;
  background-size: cover;
}
.drama-list-bg h4,.drama-list-bg h1,.drama-list-bg span,.drama-list-bg p{line-height: 14px}
item-box{padding: 8px 0 }
.item-box .aui-flex{
  background: rgba(0,0,0,0.6);
  padding: 15px 11px;
  display: flex;
  color: #fff;
  width: 95%;
  margin: 8px auto;
  border-radius: 8px;overflow: auto}
.item-box .aui-flex .aui-img{    height: 100px;
  background: url(../img/drama-sha-new.png);
  background-size: contain;
  background-repeat: no-repeat;border-radius: 8px;
  width: 100%;flex: 1}
.drama3{background-image: url("../img/drama-3.png")!important;}
.drama8{background-image: url("../img/drama-8.png")!important;}
.drama9{background-image: url("../img/drama-9.png")!important;}
.item-box  .aui-flex-box{margin-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;}
.aui-flex-box .content{font-size: 16px;font-weight: 700;}
.aui-flex-box .content{position: relative}
.aui-flex-box .content i{    width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0px;
  margin-left: 5px;
  left: 100%;
}
.aui-flex-box .content i.free{background-image: url("../img/icon-free.png");}
.aui-flex-box .content i.money{background-image: url("../img/icon-money.png");}
.aui-flex-box .detail{margin-top: 10px;font-size: 12px}
.aui-flex-box .detail span{    display: inline-block;
  padding: 3px 4px;
  border-radius: 2px;
  background: #2e2e38;
  color: #7a7d8c;
  margin-right: 4px}
.aui-flex-box .detail-box{display: flex;justify-content: space-between;align-items: center;margin-top: 8px}
.aui-flex-box .detail-box .star .iconfont{font-size: 12px}
.aui-flex-box .detail-box .person{margin-top: 5px;font-size: 12px;color: #7a7d8c;}
.orange{color: #fec144}
.gray{color: #4e495f}
.yellow{color: #eee9b1}
.ft-14{font-size: 16px;font-weight: 700}

/**/
.appoint-role .tabBox .hd{ height:40px; line-height:40px; padding:10px; font-size:20px; background:#f4f4f4; border-bottom:1px solid #F5AB38; position:relative;  }
.appoint-role .tabBox .hd ul{ position:absolute; height:41px; top:0; overflow:hidden;  }
.appoint-role .tabBox .hd ul li{ float:left; padding:0 10px; color:#666;  }
.appoint-role .tabBox .hd ul .on{ border:2px solid #F5AB38; border-bottom-color:#fff; background:#fff; color:#CF7F21;   }
.appoint-role .tabBox .hd ul .on a{ display:block; /* 修复Android 4.0.x 默认浏览器当前样色无效果bug */  }
.appoint-role .tabBox .bd ul{ padding:10px   }
.appoint-role .tabBox .bd li{ height:33px; line-height:33px;   }
.appoint-role .tabBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }  /* 去掉链接触摸高亮 */

.appoint-role .role-box {padding: 10px;background: rgba(250,253,239,0.9);display: flex;border-radius: 5px}
.appoint-role .role-box .pic{width: 80px;height: 100%;}
.appoint-role .role-box img{width:80px;vertical-align: middle}
.appoint-role .role-box .role-summary{display: flex;justify-content: flex-start;margin-left: 8px;flex-direction: column;}
.appoint-role .role-box .role-summary h1{font-size: 16px;color: rgba(0,0,0,0.7);margin-left: 0;font-weight: bold;padding-left: 0;height: 14px;line-height: 14px;margin-top: 8px;border:none}
.appoint-role .role-box .role-summary p{font-size: 12px;color: rgba(0,0,0,0.7);padding: 0;margin-top: 10px}